<template>
  <div class="field-control field-check">
    <DatePicker
      :disabled="disabled"
      :placement="placement"
      @on-clear="dateClear"
      :value="dateValue"
      @input="dateInput"
      :type="controlType"
      :placeholder="placeholder"
    ></DatePicker>
      <div
        class="field-message"
        v-show="!validate"
      >{{message}}</div>
  </div>
</template>
<script>
import base from './numberRange';
import Time from '@/common/time';
export default {
	extends: base,
	data() {
		return {
			formatStr: 'YYYY-MM-DD hh:mm:ss',
			controlType: 'datetimerange',
			placeholder: '选择时间范围',
		};
	},
	computed: {
		dateValue() {
			var v = [];
			if (this.valueStart || this.valueEnd) {
				v = [Time.toTime(this.valueStart, this.formatStr), Time.toTime(this.valueEnd, this.formatStr)];
			} else if (this.rowData[this.codeStart] || this.rowData[this.codeEnd]) {
				v = [
					Time.toTime(this.rowData[this.codeStart], this.formatStr) || null,
					Time.toTime(this.rowData[this.codeEnd], this.formatStr) || null,
				];
			}
			return v;
		},
		placement() {
			if (this.rowIndex !== null && this.rowIndex <= 1 && this.rowIndex < this.rowLength - 1) {
				return 'bottom-start';
			} else {
				return 'bottom-end';
			}
		},
	},
	methods: {
		dateInput(e) {
			if (e[0] || e[1]) {
				if (e[0] === '') e[0] = null;
				if (e[1] === '') e[1] = null;
				this.$emit('extInput', {
					code: this.codeStart,
					value: e[0] && Time.toTs(e[0]),
				});
				this.$emit('extInput', {
					code: this.codeEnd,
					value: e[1] && Time.toTs(e[1]),
				});
			}
		},
		dateClear(e) {
			this.$emit('extInput', {
				code: this.codeStart,
				value: null,
			});
			this.$emit('extInput', {
				code: this.codeEnd,
				value: null,
			});
		},
	},
};
</script>
<style lang="less">
.field-control .ivu-date-picker {
	width: 100%;
}
</style>
